<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            :headerTitle="headerTitle"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div
                class="rules-detail"
                v-if="$route.query.rulesType == '1'"
            >
                <img
                    class="rules-img"
                    src="@/assets/images/joinUs/shopKeer-rules-img.jpg"
                />
            </div>

            <div
                class="rules-detail"
                v-if="$route.query.rulesType == '2'"
            >
                <img
                    class="rules-img"
                    src="@/assets/images/joinUs/provider-rules-img.jpg"
                />
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <div class="agreement-box">
            <div
                class="agreement-item no-agree"
                @click="noAgree"
            >不同意</div>
            <div
                class="agreement-item agree"
                @click="agree"
            >同意</div>
        </div>
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'Rules',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.31rem',
                background: '#fff'
            },
            headerTitle: ''
        }
    },
    mounted() {
        if (this.$route.query.rulesType == '1') {
            this.headerTitle = '金牌店主申请流程'
        } else {
            this.headerTitle = '服务商申请流程'
        }
    },
    methods: {
        noAgree() {
            const that = this
            this.commonDialog.alert(
                '提示',
                '不同意将无法继续申请加入我们！',
                function() {
                    that.$router.back(-1)
                }
            )
        },
        agree() {
            const that = this
            let postData = this.qs.stringify({
                type: this.$route.query.rulesType
            })
            this.axios
                .post('/api/user/agent/apply.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.commonDialog.alert(
                            '提示',
                            '申请成功，请立即联系店主开通服务',
                            function() {
                                that.$router.push('/userCenter')
                            }
                        )
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        }
    }
}
</script>

<style lang="stylus" scoped>
.rules-title
    line-height 1.11rem
    font-size 0.33rem
    color #333
    border-bottom 1px solid #e5e5e5
.rules-detail
    .rules-img
        width 100%
.agreement-box
    position absolute
    bottom 0
    left 0
    right 0
    height 1.31rem
    display flex
    .agreement-item
        flex 1
        height 1.31rem
        line-height 1.31rem
        text-align center
        font-size 0.38rem
        color #fff
    .no-agree
        background #ffbab8
    .agree
        background #d7463c
</style>


